<template>
  <el-steps :key="statesKeys.length" :active="activeIndex" simple>
    <el-step v-for="(cn, key) in displayStates" :key="key" :title="cn" />
  </el-steps>
</template>

<script>
import { states } from '../format';

export default {
  name: 'progress-bar', // 处理进度
  props: ['state'],
  computed: {
    displayStates() {
      const stateKeys = Object.keys(states);
      if (this.state === 'confirming') return states;
      return Object.assign({}, ...stateKeys.filter(key => key !== 'confirming').map(key => ({ [key]: states[key] })));
    },
    statesKeys() { return Object.keys(this.displayStates); },
    activeIndex() { return this.statesKeys.indexOf(this.state); },
  },
};
</script>

<style></style>
